<template>
	<div class="w-full">
		<div class="w-full flex items-center justify-center">
			<div class="w-40%">
				<p class="text-34px text-[#000] font-bold">确认个人信息</p>
				<div class="mt-40px ">
					<div>
						<p class="text-#86909C text-14px">国籍</p>
						<div
							class="rounded-8px h-60px flex items-center border-1px border-solid border-#E5E6EB mt-10px pl-20px">
							<img src="/person/china.svg" class="w-40px h-40px rounded-50% mr-20px">
							<p class="text-18px">中国</p>
						</div>
					</div>
					<div class="mt-30px">
						<p class="text-#86909C text-14px">国籍</p>
						<div
							class="rounded-8px h-60px flex items-center border-1px border-solid border-#E5E6EB mt-10px pl-20px">
							<p class="text-18px">夏天</p>
						</div>
					</div>
					<div class="mt-30px">
						<p class="text-#86909C text-14px">出生日期（年/月/日）</p>
						<div class="flex items-center justify-between">
							<div
								class="rounded-8px h-60px flex items-center border-1px border-solid border-#E5E6EB mt-10px pl-20px w-32% box-border">
								<p class="text-18px">2000</p>
							</div>
							<div
								class="rounded-8px h-60px flex items-center border-1px border-solid border-#E5E6EB mt-10px pl-20px w-32% box-border">
								<p class="text-18px">11</p>
							</div>
							<div
								class="rounded-8px h-60px flex items-center border-1px border-solid border-#E5E6EB mt-10px pl-20px w-32% box-border">
								<p class="text-18px">17</p>
							</div>
						</div>
					</div>
				</div>
				<div class="mt-160px">
					<p class="text-14px mb-20px">请选择继续，即表示您认为上述个人信息准确无误</p>
					<el-button color="#114CEE" style="width: 100%;height:50px;font-size: 18px;"
						@click="next">继续</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const emits = defineEmits(['back', 'next'])

const next = () => {
	emits('next')
}

const back = () => {
	emits('back')
}

</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
	border: 1px solid #E5E6EB;
	border-radius: 8px;
	margin-top: 20px;
	min-height: 90px;
}

::v-deep .el-collapse-item__header {
	border: none;
	padding: 0 20px 0 20px;
	border-radius: 10px;
	min-height: 90px;
	box-sizing: border-box;
	font-weight: 300;
}

::v-deep .el-collapse-item.is-active .el-collapse-item__wrap {
	border-radius: 8px;
}</style>
